import { useMutation } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import cn from 'classnames';
import { FC, useEffect, useState } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';

import {
  AdminService,
  EmployeeRole,
  IEmployeeForm,
} from '../../../services/admin.service.ts';
import Page from '../../layout/Page';

import type { CreateEmployeePageProps } from './CreateEmployeePage.props';

const CreateEmployeePage: FC<CreateEmployeePageProps> = ({}) => {
  // Храним роль в useState, потому что useForm не умеет работать с
  // тегом select.
  const [selectedRole, setSelectedRole] = useState<EmployeeRole>(
    EmployeeRole.ADMIN,
  );

  // Используем хук useForm для того, чтобы управлять состоянием формы
  const { register, handleSubmit, reset } = useForm<IEmployeeForm>({
    mode: 'onChange',
  });

  // Используем мутацию вновь, ведь запрос должен отправляться только
  // при нажатии на кнопку
  const { mutate, isSuccess, isError, error } = useMutation({
    mutationKey: ['admin', 'create', 'employee'],
    mutationFn: (data: IEmployeeForm) => AdminService.createEmployee(data),
    onSuccess() {
      reset();
    },
  });

  // Запускает мутацию при отправке формы
  const onFormSubmit: SubmitHandler<IEmployeeForm> = data => {
    mutate({
      ...data,
      role_id: selectedRole,
    });
  };

  return (
    <Page heading={'Создать сотрудника'}>
      <form
        className={cn(
          'flex flex-col items-start gap-[.5em]',
          '[&>label]:flex [&>label]:gap-[.5em]',
          '[&>label>input]:border-[1px] [&>label>input]:border-neutral-300',
        )}
        onSubmit={handleSubmit(onFormSubmit)}
      >
        <label>
          Имя
          <input {...register('name')} />
        </label>

        <label>
          Логин
          <input {...register('login')} />
        </label>

        <label>
          Пароль
          <input
            {...register('password')}
            type={'password'}
          />
        </label>

        <label>
          Роль
          <select
            value={selectedRole}
            onChange={ev => {
              setSelectedRole(+ev.target.value);
            }}
          >
            <option value={EmployeeRole.ADMIN}>Администратор</option>

            <option value={EmployeeRole.WAITER}>Официант</option>

            <option value={EmployeeRole.COOK}>Повар</option>
          </select>
        </label>

        <button type={'submit'}>Создать</button>

        {isSuccess && <>✅ Сотрудник успешно создан</>}
        {isError && (
          <>{`⛔ Ошибка ${(error as AxiosError).response?.status}`}</>
        )}
      </form>
    </Page>
  );
};

export default CreateEmployeePage;
